<template>
	<view class="page-top"
		:style="{'--color':color ? color:'#FFFFFF','--bg':bg ? bg:'#11A9F0','--topBg':topBg ? topBg:'#11A9F0','--fontSize':fontSize ? fontSize:'16px','--pageHeight':height ? height:'35px'}">
		<view class="page-status">
		</view>
		<view class="page-bar">
			<view class="page-bar-left">
				<slot name="left"></slot>
			</view>
			<view class="page-bar-centre">
				<slot name="centre">{{title?title:myTiele}}</slot>
			</view>
			<view class="page-bar-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pageTop",
		// color:字体验收
		// bg:导航背景验收
		// title:菜单名称
		// topBg:顶部状态栏背景验收
		// fontSize:字体大小
		// height:菜单栏高度
		props: ["color", "bg", "title", "topBg", "fontSize", "height"],
		data() {
			return {
				myTiele: uni.getAppBaseInfo().appName
				// myTiele:uni.getAppBaseInfo().appName
			}



		},
	onLoad() {

			var pages = getCurrentPages()[pages.length - 1].$holder.navigationBarTitleText
			// var page = pages[pages.length - 1]
			// var title = page.$holder.navigationBarTitleText
	
		},
		methods: {
			// 返回方法
			navigateBackEv() {
				console.log('返回')
				uni.navigateBack({
					delta: 1,
					success(res) {

						console.log(res)
						console.log('返回成功')
					},
					fail(err) {
						console.log(err)
						console.log('返回失败')
					}
				});
			},
			// 确认方法
			suerEv() {
				if (this.suer) {
					console.log('需要处理')
					this.$emit('pageTopSuerEv')
				} else {
					console.log('不需要处理')
				}
			}
		}


	}
</script>
<!-- flex布局 -->
<!-- http://eyunzhu.com/cdata/U7hPT5w9uayLSIQ7qfFNUg -->
<style lang="scss">
	.page-top {
		.page-status {
			height: var(--status-bar-height);
			background-color: var(--topBg);
		}

		.page-bar {
			background-color: var(--bg);
			height: var(--pageHeight);
			line-height: var(--pageHeight);
			display: flex;

			.page-bar-left {
				flex: 1;
				text-align: left;
				padding-left: 10px;
				box-sizing: border-box;
				// height: var(--pageHeight);
				// line-height: var(--pageHeight);
				display: flex;
				align-items: center;
				// background-color:#307207;
			}

			.page-bar-centre {
				flex: 2;
				color: var(--color);
				font-size: var(--fontSize);
				font-weight: 600;
				display: flex;
				justify-content: center;
				align-items: center;
				// background-color:#F2BD18;
			}

			.page-bar-right {
				flex: 1;
				display: flex;
				// text-align: right;
				justify-content: flex-end;
				align-items: center;
				padding-right: 10px;
				box-sizing: border-box;
				// background-color:#213C0C;
			}
		}
	}
</style>